import React, { Fragment } from 'react';
import { Layout, Menu } from 'antd';
import { withRouter,Link } from 'react-router-dom';
import styles from './styles.module.less';
import { connect } from 'react-redux';
import {RightOutlined,AppstoreOutlined} from '@ant-design/icons'


const { Sider } = Layout;
const { SubMenu } = Menu;
class UTSider extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        openKeys:[],
        selectedKeys: [''],
        equips:[],
      }
    }
    handleClick = e => {
        console.log('click ', e.key);
        this.props.backImgList[0].backImgVo2s.map((item,index)=>{
            if(item.equipId === e.key){
                this.props.getAllUtDatas({
                    equipId:item.equipId,
                    positionId:item.positionId
                })
                console.log(item)
              // this.props.setChoice({allFsmDatas:item.describe})
            }
        })
      };
    componentDidMount() {
      this.props.getBackImg()
    }

    componentDidUpdate(){
      console.log(this.props.backImgList)
      this.props.getAllUtDatas({
        equipId:this.props.backImgList[0].backImgVo2s[0].equipId,
        positionId:this.props.backImgList[0].backImgVo2s[0].positionId
    })
    }
    render() {
      console.log(this.props.backImgList[0]);

      // console.log(this.props.backImgList[index].backImgVO1.name);
      return (
              <Sider width="200" theme="light">
                <div className={ styles.logoContent }>
                    {/* 四川大学 */}
                    <div className={styles.logo}></div>
                    {/* <a >
                      <img className={ styles.logo } src={logo} />
                    </a> */}
                </div>
                        <Menu
                onClick={this.handleClick}
                // theme="dark"
                defaultSelectedKeys={['6']}
                defaultOpenKeys={['sub1']}
                mode="inline"
            >
              
                <SubMenu key="sub1" icon={<AppstoreOutlined />} title="UT设备">
                {
                   this.props.backImgList[0] !== undefined?
                   this.props.backImgList[0].backImgVo2s.map((item,index)=>{
                       return <Menu.Item key={item.equipId} >{item.describe}</Menu.Item>
                   }) : ''
                }
                </SubMenu>
            
            </Menu>
                  {/* <Menu
                      onClick={ this.menuChange }
                      mode="inline"
                      theme="dark"
                      defaultOpenKeys={1}
                      // defaultSelectedKeys={['0']}
                  >
                      <SubMenu key={1} title={this.props.backImgList[index].backImgVO1.name} >
                        {this.MenuItems(this.props.backImgList[index].backImgVo2s)}
                      </SubMenu>
                  </Menu> */}
              </Sider>
      )
    }
}
            
const mapStateToProps = (state) => ({ backImgList:state.equipmentPage.backImgList,choice:state.equipmentPage.choice,equip:state.equipmentPage.equip, index:state.equipmentPage.index,allFsmDatas:state.equipmentPage.allFsmDatas, equipIndex:state.equipmentPage.equipIndex,Utequip:state.equipmentPage.Utequip,xxx:state.equipmentPage.xxx});
const mapDispatchToProps = dispatch => {
  return {
    getBackImg: dispatch.equipmentPage.getBackImg,
    getCurve: dispatch.equipmentPage.getCurve,
    getAverageRate: dispatch.equipmentPage.getAverageRate,
    setChoice: dispatch.equipmentPage.setState,
    get2DAnd3D: dispatch.equipmentPage.get2DAnd3D,
    getAllUtDatas:dispatch.equipmentPage.getAllUtDatas
  }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(UTSider));
